<template>
  <div>
    <el-row>
      <el-col :span="24">
        <span style="float: right"
        ><el-button type="primary"  @click="showDia"
        >信息填入</el-button
        ></span
        >
      </el-col>
    </el-row>
    <div class="enterInfor">
      <table>
        <tr>
          <td rowspan="4" width="8%" class="left">财务信息</td>
          <td width="8%" class="title">前置评估费</td>
          <td width="14%">{{ form.frontMoney }}<span class="unit">(元)</span>
          </td>
          <td width="8%" class="title">收费时间</td>
          <td width="14%">{{ form.frontChargingTime }}</td>
          <td width="8%" class="title">后置评估费</td>
          <td width="14%">{{ form.postMoney }}<span class="unit">(元)</span></td>
          <td width="8%" class="title">收费时间</td>
          <td>{{ form.postChargingTime }}</td>
        </tr>
        <tr>
          <td width="8%" class="title">前置服务费</td>
          <td width="14%">{{ form.frontServiceMoney }}<span class="unit">(元)</span></td>
          <td width="8%" class="title">收费时间</td>
          <td width="14%">{{ form.frontServiceChargeTime }}</td>
          <td width="8%" class="title">保证金</td>
          <td width="14%">{{ form.margin }}<span class="unit">(元)</span></td>
          <td width="8%" class="title">收费时间</td>
          <td width="14%">{{ form.marginTime }}</td>
        </tr>
        <tr>
          <td width="8%" class="title">其他费用</td>
          <td width="14%">{{ form.otherMoney }}<span class="unit">(元)</span></td>
          <td width="8%" class="title">收费时间</td>
          <td width="14%">{{ form.otherChargingTime }}</td>
          <td width="8%" class="title">支付担保保证金</td>
          <td width="14%">{{form.securityDeposit }}<span class="unit">(元)</span></td>
          <td width="8%" class="title">支付时间</td>
          <td width="14%">{{ form.securityDepositTime }}</td>
        </tr>

        <tr >
          <td width="8%" class="title">备注</td>
          <td colspan="7">{{ form.financialRemark }}</td>

        </tr>

      </table>

    </div>

    <el-dialog
      title="信息填入："
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="1400px"
    >
      <financial-info-form :form="form" @closeDialog="closeDialog"></financial-info-form>

    </el-dialog>

  </div>
</template>

<script>

import { financial,updateFinancial } from "../../../src/assets/js/api";
import FinancialInfoForm from "./financialInfoForm";

export default {
  name: "financialInfo",
  components: { FinancialInfoForm },
  props: ["orderNumber","showBtn"],
  data() {
    return {
      form: {},
      dialogVisible:false,
    };
  },
  mounted() {
    this.getFinancial();
  },
  methods: {

//获取财务信息
    getFinancial() {
      financial(this.orderNumber).then(res => {
        // console.log(  res)
        this.form = res.data;
      });
    },
    //显示修改信息弹窗
    showDia(){
      this.dialogVisible=true;
    },
    //关闭弹窗
    closeDialog(){
      this.dialogVisible=false;
      this.getFinancial();
    },
  }

};
</script>

<style scoped>
.indexell {
  margin-top: 15px;
  color: transparent;
}

.indexBOX {
  width: 220px;
}

.indexTextarea {
  /*width: 600px;*/
}

/*.form-box {*/
/*  position: relative;*/
/*}*/
.form-box .right {
  color: #1d2029;
  position: relative;
  right: -20px;
  z-index: 1;
}

.btn-box  {
  text-align: center ;
}
.el-button {
  line-height: 5px;
  height: 30px;
}

.enterInfor{
  margin-top: 14px;
}
.enterInfor table {
  width: 100%;
  margin-bottom: 10px;
  word-break: break-all;
}

.enterInfor table {
  table-layout: fixed;
  border-collapse: collapse;
  border: none;
}

.enterInfor table td {
  font-size: 14px;
  padding: 5px 0;
  padding-left: 10px;
  text-align: left;
  color: #333;
  border: 1px rgb(121, 121, 121) solid;
}

::v-deep .el-range-editor--small.el-input__inner {
  width: 210px;
}

.enterInfor .left {
  font-size: 14px;
  font-weight: bold;
  padding: unset;
  text-align: center;
  color: rgba(51, 51, 51, 1);
}

.enterInfor .title {
  width: 8%;
  background: rgba(59, 157, 248, .06);
}

.unit{
  float: right;
  margin-right: 10px;
}


</style>